<template>
    <div class="">
        <div style="width: auto;height: 400px" id="main"
             v-loading="true"
             element-loading-text="数据加载中...">
        </div>
        <el-table :data="tthis.tableData">
            <el-table-column type="index" width="50"/>
            <!--      <el-table-column prop="id" label="id" width="120"></el-table-column>-->
            <el-table-column prop="deviceId" label="设备id" width="120"></el-table-column>
            <el-table-column prop="nodeId" label="节点id" width="120"></el-table-column>
            <el-table-column prop="nodeDescription" label="节点描述" width="240"></el-table-column>
            <el-table-column prop="temperature" label="温度"></el-table-column>
            <el-table-column prop="humidity" label="湿度"></el-table-column>
            <el-table-column prop="createTime" label="时间" width="210"></el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import axios from 'axios'
import * as echarts from "echarts";
import {inject, onMounted, reactive} from "vue";


// 使用 inject 获取全局变量
const $host = inject('$host');
axios.defaults.baseURL = $host

const item = {
    id: "0",
    nodeId: "0",
    deviceId: "0",
    nodeDescription: "-。-",
    temperature: "xxx",
    humidity: "xxx",
    createTime: "118，231",
};
const tthis = reactive({
    tableData: Array(5).fill(item),
    temperatureData: [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]],
    humidityData: [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]]
})


function echartsInit() {
    // prettier-ignore
    const temperatureDataList = tthis.temperatureData.map(function (item) {
        return item[0];
    });
    const temperatureValueList = tthis.temperatureData.map(function (item) {
        return item[1];
    });
    const humidityDataList = tthis.humidityData.map(function (item) {
        return item[0];
    });
    const humidityValueList = tthis.humidityData.map(function (item) {
        return item[1];
    });
    //柱形图
    //因为初始化echarts 的时候，需要指定的容器 id='main'
    echarts.init(document.getElementById('main')).setOption({
        // Make gradient line here
        visualMap: [
            {
                show: false,
                type: 'continuous',
                seriesIndex: 0,
                min: 0,
                max: 400
            },
            {
                show: false,
                type: 'continuous',
                seriesIndex: 1,
                dimension: 0,
                min: 0,
                max: temperatureDataList.length - 1
            }
        ],
        title: [
            {
                left: 'center',
                text: '温度'
            },
            {
                top: '55%',
                left: 'center',
                text: '湿度'
            }
        ],
        tooltip: {
            trigger: 'axis'
        },
        xAxis: [
            {
                data: temperatureDataList
            },
            {
                data: humidityDataList,
                gridIndex: 1
            }
        ],
        yAxis: [
            {},
            {
                gridIndex: 1
            }
        ],
        grid: [
            {
                bottom: '60%'
            },
            {
                top: '60%'
            }
        ],
        series: [
            {
                type: 'line',
                showSymbol: false,
                data: temperatureValueList
            },
            {
                type: 'line',
                showSymbol: false,
                data: humidityValueList,
                xAxisIndex: 1,
                yAxisIndex: 1
            }
        ]
    })
}

onMounted(() => {
    axios({
        method: 'GET',
        url: '/node-data/list',
        params: {
            sensorEnum: 'INDOOR_TEMPERATURE_AND_HUMIDITY'
        }
    }).then(({data}) => {
        let data2 = data.data.reverse();
        tthis.temperatureData = data2.map(item => {
            return [item.createTime, item.temperature]
        })
        tthis.humidityData = data2.map(item => {
            return [item.createTime, item.humidity]
        })
        // 在通过mounted调用即可
        echartsInit()
        // 加载表格数据
        tthis.tableData = data.data.reverse().map(item => {
            item.temperature += ' ℃'
            item.humidity += ' %rh'
            return item
        })
    })
})
</script>
<style scoped>
/* //@import url(); 引入公共css类 */
</style>
